<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="resources/mytheme/css/main.css">
<link rel="stylesheet" type="text/css"
	href="resources/mytheme/css/jquery-ui.css">
<script type="text/javascript" src="resources/js/jQuery.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui.js"></script>
<script type="text/javascript" src="resources/js/registration.js"></script>
<script type="text/javascript">
function removeChars(ename)
{
	var inputString = document.getElementById(ename).value;
	var pass1 = inputString.replace('\'','');
	var pass2 = pass1.replace('\'','');
	var pass3 = pass2.replace('\'','');
	document.getElementById(ename).value = pass3.replace('\"','');
}

</script>
<script>
$(document).ready(function(){

	var count = 0;
	
	var placeholder = "";
		  
  	$('#SSN').keyup(function(){
  			
	var p1=$(this).val(); 
	
	count=p1.length;
	  if (count>10){

		  if (count==11 && ($(this).val()=="***-**-****"| $(this).val()=="***-**-----" )){
		  window.alert('Please use a valid SSN an Invalid SSN will result in denial of your claims: 123-12-1234:  Please re-enter your SSN');
	       	 placeholder = $(this).val().replace(/./g,"");
	       	$(this).val(placeholder);}
		  }
   	  if (count<4){
   		if (!/^[0-9]+$/.test($(this).val()) && count==1){
      	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
       	 placeholder = $(this).val().replace(/./g,"");
       	 $(this).val(placeholder);} 
   		if (!/^[0-9*]+$/.test($(this).val()) && count==2){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);}
   		if (!/^[0-9*]+$/.test($(this).val()) && count==3){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);}
    	 
   	   	  }
	  if (count>4 && count<7){
		  if (!/^[0-9*-]+$/.test($(this).val()) && count==5 && $(this).val()!=="***-*" ){
	      	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
	       	 placeholder = $(this).val().replace(/./g,"");
	       	 $(this).val(placeholder);} 
	       	 
		  if (!/^[0-9*-]+$/.test($(this).val()) && count==6 && $(this).val()!=="***-**"){
	      	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
	       	 placeholder = $(this).val().replace(/./g,"");
	       	 $(this).val(placeholder);}

		  }
      if (count<8 ){
    	  placeholder = $(this).val().replace(/[0-9]/g,"*");
      	$(this).val(placeholder);
    	 if (count==4 && $(this).val()!=="***-"){
        	 window.alert('You must use the dashes to enter your SSN example: 123-12-1234:  Please re-enter your SSN');
    	 placeholder = $(this).val().replace(/./g,"");
    	 $(this).val(placeholder);}
    	 
    	 if (count==7 && $(this).val()!=="***-**-"){
        	 window.alert('You must use the dashes to enter your SSN example: 123-12-1234:  Please re-enter your SSN');
    	 placeholder = $(this).val().replace(/./g,"");
    	 $(this).val(placeholder);}
    	 
      				}
       if (count>7){
          if (!/^[0-9-*]+$/.test($(this).val()) && count==8){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);} 
      	 
          if (!/^[0-9-*]+$/.test($(this).val()) && count==9){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);} 

          if (!/^[0-9-*]+$/.test($(this).val()) && count==10){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);} 

          if (!/^[0-9-*]+$/.test($(this).val()) && count==11){
        	  window.alert('A SSN does not have letters so re-enter more carfully: example: 123-12-1234:  Please re-enter your SSN');
         	 placeholder = $(this).val().replace(/./g,"");
         	 $(this).val(placeholder);} 
       }});
});
	
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>

    function is_int(value){ 
      if((parseFloat(value) == parseInt(value)) && !isNaN(value)){
        return true;
      } else { 
        return false;
      } 
    }

    $(function() {

      $("#zip").keyup(function() {

        // Cache 
        var el = $(this);

        // Did they type five integers?
        if ((el.val().length == 5) && (is_int(el.val())))  {

          // Call Ziptastic for information
          $.ajax({
            url: "http://zip.elevenbasetwo.com",
            cache: false,
            dataType: "json",
            type: "GET",
            data: "zip=" + el.val(),
            success: function(result, success) {

              $(".zip-error, .instructions").slideUp(200);

              $("#city").val(result.city);

              $("#state").val(result.state);			

              $(".fancy-form div > div").slideDown();
		

            },
            error: function(result, success) {

              $(".zip-error").slideDown(300);

            }

          });

        }  else if (el.val().length < 5) {

          $(".zip-error").slideUp(200);

        }; 

      });

    }); // END DOM Ready

  </script>



<title>Register</title>
</head>
<body>
	<div id="headerContainer">
		<div class="centerContainer">
			<ol>
				<sec:authorize ifAllGranted="ROLE_ADMIN">
					<li><a href="AdminUsers">Users</a></li>
					<li><a href="AdminRejectedClaims">Rejected Claims</a></li>
					<li><a href="AdminAcceptedClaims">Accepted Claims</a></li>
					<li><a href="AdminAllClaims">All Claims</a></li>
				</sec:authorize>
				<sec:authorize ifAnyGranted="ROLE_ADMIN, ROLE_ADJUSTER">
					<li><a href="InsuranceAdjuster">Adjust Claims</a></li>
				</sec:authorize>
			</ol>
		</div>
		<!-- /centerContainer -->

	</div>
	<!-- /headerContainer -->

	<div id="secondHeaderContainer">
		<div class="logoContainer">
			<img src="resources/mytheme/images/logo2.png" alt="logo" width="205"
				height="89">
		</div>
		<!-- /logoContainer -->
		<div class="navContainer">

			<ul id="navWrapper">
				<li><a href="/AcmeClaims">Home</a></li>
				<sec:authorize ifNotGranted="ROLE_ADMIN">
					<c:if test="${pageContext.request.userPrincipal.name != null}">
						<li>
							<!-- Menu A --> <a href="#">Claims</a>
							<ul>
								<li><a href="ClaimPortal">Submit Claim</a></li>
								<li><a href="MyAccount">View Claim</a></li>
							</ul>
						</li>
						<li><a href="MyAccount">My Account</a></li>
					</c:if>
				</sec:authorize>
				<li><a href="locatedoctor">Find a Doctor</a></li>
			</ul>
		</div>
		<!-- /navContainer -->
	</div>
	<!-- /secondHeaderContainer -->

	<div id="thirdHeaderContainer">
		<div class="lowerheaderContainer">
			<c:if test="${pageContext.request.userPrincipal.name != null}">
				<ol>
					<li><a href="<c:url value="/MyAccount" />">${pageContext.request.userPrincipal.name}</a></li>
					<li>|</li>
					<li><a href="<c:url value="/Logout" />"> Logout</a></li>
				</ol>
			</c:if>
			<c:if test="${pageContext.request.userPrincipal.name == null}">
				<ol>
					<li><a href="Login">Log-In</a></li>
					<li>|</li>
					<li><a href="register">Register</a></li>
				</ol>
			</c:if>
		</div>
		<!-- /lowerHeader-->
	</div>


	<!-- Start of body -->
	<div id="bodyWrapper">
		<%-- <center> --%>
		<div id="linething3">
			<h3>Sign Up Below</h3>
		</div>
		<br>
		<div class="tableWrapper">
			<div class="securityBlock">
				<h4>Secure and Confidential</h4>
				<img src="resources/mytheme/images/lock.png">
				<p>We consider your personal information completely private and
					will not disclose it to anyone who's not authorized to view it.</p>
			</div>
			<form:form action="register" name="regForm" method="post"
				commandName="userForm">
				<table>
					<tr>
						<td><label>Member First Name:</label></td>
						<td><form:input path="fName" id="fn" placeholder="First Name"
								required="true" title="First Name" maxlength="20"
								onblur="removeChars('fn')" /></td>
					</tr>
					<tr>
						<td><label>Member Last Name:</label></td>
						<td><form:input path="lName" id="ln" placeholder="Last Name"
								required="true" title="Last Name" maxlength="20"
								onblur="removeChars('ln')" /></td>
					</tr>
					<tr>
						<td><label>Member Birth Date:</label></td>
						<td><form:input type="date" path="birthday" id="bd" required="true"
								placeholder="Birthday: YYYY-MM-DD" maxlength="10" minlength="10" />
						</td>
					</tr>
					<tr>
						<td><label>Member Gender:</label></td>
						<td><form:radiobutton path="gender" id="gen" required="true"
								value="Male" />M <form:radiobutton path="gender" id="gen"
								required="true" value="Female" />F</td>
					</tr>
					<tr>
						<td><label>Address: </label> </td>
						<td><form:input path="address" id ="addr" required = "true"
							placeholder="Address" title="address" ></form:input> </td>
					</tr>
					<tr>
						<td><label>City: </label> </td>
						<td><form:input path="city" id ="city" required = "true" name="city"
							placeholder="City" title="city" ></form:input> </td>
					</tr>
					<tr>
						<td><label>State: </label> </td>
						<td><form:input path="state" id ="state" required = "true" name="state"
							placeholder="State: (ND)" title="state" ></form:input> </td>
					</tr>
					<tr>
						<td><label>Zipcode: </label> </td>
						<td><form:input path="zipcode" id="zip" name="zip"
								required="true" placeholder="zipcode" maxlength="5" />
								<p class="zip-error">Not a real zip code.</p> 
						</td>
					</tr>
					<tr>
						<td><label>Member ID Number:</label></td>
						<td><form:input path="insuranceNumber" id="bd"
								required="true" placeholder="Insurance ID Number" maxlength="11" />
						</td>
					</tr>
					<tr>
						<td><label>Member SSN:</label></td>
						<td><form:input id="SSN" path="SSN" required="true"
								placeholder="SSN: XXX-XX-XXXX" title="SSN" maxlength="11" /></td>
					</tr>
					<tr>
						<td><label>Username:</label></td>
						<td><form:input path="username" id="username" required="true"
								placeholder="User Name" title="Username" maxlength="20"
								onblur="removeChars('username')" /></td>
						<c:if test="${param.uNameError == 'true' }">
							<div class="error">
								<font color='red'>That username is unavailable</font>
							</div>
						</c:if>
					</tr>
					<tr>
						<td><label>Password:</label></td>
						<td><form:password id="pw" path="password" required="true"
								placeholder="Password" maxlength="20" title="Password" /> <form:password
								id="pw2" path="" name="pw2" required="true"
								placeholder="Confirm Password" maxlength="20" title="Password" />
						</td>
					</tr>
					<tr>
						<td><label>Email Address:</label></td>
						<td><form:input id="email" path="email" required="true"
								placeholder="Email" maxlength="50" title="Email" /> <form:input
								id="email2" path="" name="email2" required="true"
								placeholder="Confirm Email" maxlength="50" title="Email" /></td>
						<c:if test="${param.emailError == 'true' }">
							<div class="error">
								<font color='red'>That email address is unavailable</font>
							</div>
						</c:if>
					</tr>
				</table>
				<div class="registerLinks">
					<input type="submit" value="Create Account" /> <input type="reset"
						value="Cancel" />
				</div>
				<input type="hidden" name="${_csrf.parameterName}"
					value="${_csrf.token}" />
			</form:form>
		</div>
		<div id="linething"></div>
		<br>
		<div class="helpLink">
			<a class="open-dialog" href="#">Need Help?</a>
		</div>

		<div class="dialog">
			<div>
				<div id="accordion">
					<h3>Who can register?</h3>
					<div>Anyone who participates in a Acme Insurance plan may
						register for online access to their information. If you are
						covered by another family member's Acme Insurance plan, you cannot
						access any claim or coverage information. Anyone enrolling in a
						Acme Insurance Life, Accident or Disability Insurance plan is also
						eligible to register.</div>
					<h3>Why register?</h3>
					<div>Register on Acme Insurance and you'll be able to find
						all your coverage information online, when you need it. If you're
						covered by another family member's Acme Insurance plan, you can
						register but you will not have access to claim or coverage
						information.</div>
					<h3>How do I get a Username?</h3>
					<div>
						<a href="register">Register</a> with Acme Insurance now to get
						your permanent User ID
					</div>
					<h3>What information does Acme Insurance need to register me?</h3>
					<div>
						<div>To ensure your privacy and security, Acme Insurance
							requires personal information so we can verify your identity.
							Please provide:</div>

						<div>
							<ul>
								<li>First Name</li>
								<li>Last Name</li>
								<li>Birth Date</li>
								<li>Insurance card ID number</li>
								<li>Social Security Number</li>
								<li>Email Address</li>
								<li>Create Username</li>
								<li>Create Password</li>
							</ul>
						</div>

						<div>If you're covered by another family member's Acme
							Insurance plan, you may need to enter the Primary Customer's
							social security number or Username. The Primary Customer is the
							person who enrolled in the Acme Insurance plan, either on their
							own or through their employer.</div>
					</div>
					<h3>Where can I find my Acme Insurance Customer ID?</h3>
					<div>You'll find your Customer ID number on your Acme
						Insurance ID card.</div>
					<h3>What if I try to register, but my identity is not
						validated?</h3>
					<div>We maintain high security standards. That means the
						registration information you provide must exactly match the
						information we have on file for you. Please try to register again.
						If you receive a Validation Data error, please call Acme Insurance
						Customer Service at 1.800.123.4567 and we'll help you register.</div>
					<h3>When will I have access to Acme Insurance account?</h3>
					<div>Immediately. As soon as you register, you will gain
						access to all of your account information.</div>
				</div>
			</div>
		</div>
		<%-- </center> --%>
	</div>
	<!-- End of body -->


	<div id="footer">
		<div class="footerwrap">
			<div class="foota">
				<br>
				<p>Connect With Us</p>
				<div id="footapad">
					<a href="#"><img src="resources/mytheme/images/fb.png"
						id="facebook" alt="logo" width="67" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/twit.png" id="twitter" alt="logo"
						width="65" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/pin.png" id="pintrest" alt="logo"
						width="67" height="73" /></a>


				</div>
			</div>
			<div class="footb">
				<br>
				<p>Toll Free: 1-800-382-3827</p>
				<ol>
					<li>Acme Corporate</li>
					<li>143 23rd Ave South</li>
					<li>Fargo, North Dakota 58121</li>
				</ol>
			</div>
			<div class="footc">
				<br>
				<p>Need Help?</p>
				<ol>
					<li><a href="ContactUs">Contact Us</a></li>
					<li><a href="LocateDoctor">Get Directions</a></li>
					<li><a href="FAQ">FAQ's</a></li>
				</ol>

			</div>
		</div>
		<!-- FooterWrap -->
	</div>
	<!-- Footer -->

</body>
</html>